<template>
  <base-breadcrumb :title="titleName">
    <div class="toggle">
      <span
        class="list"
        :class="{ active: isActive }"
        @click="toggle"
      >
        清单
      </span>
      <span
        class="summary"
        :class="{ active: !isActive }"
        @click="toggle"
      >
        汇总表
      </span>
    </div>
    <listTable v-if="isActive" />
    <summaryTable v-else />
  </base-breadcrumb>
</template>

<script>
import listTable from './components/listTable'
import summaryTable from './components/summaryTable'
export default {
  name:'a'+Date.now(),
  components: {
    listTable,
    summaryTable
  },
  data() {
    return {
      titleName: '',
      isActive: true
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
    }
  }
}
</script>
<style lang="less" scoped>
.toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  .active {
    background: #1890ff;
    color: #fff;
  }
  .list {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .summary {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  span {
    background: #ffffff;
    color: #b2aaaa;
    display: inline-block;
    padding: 5px;
    width: 100px;
    text-align: center;
  }
}
</style>
